<template>
  <div class="home">
    <data-form :content="content" :colnum="1" @submit="abb">
      <div slot="searchForm">
        search
      </div>
      <div slot="contentData">
        grid
      </div>
      <div slot="footerAction">
        footer
      </div>
    </data-form>
    <!-- <a-button type="primary">aaa</a-button> -->
  </div>
</template>
<script>
// @ is an alias to /src
import { DataForm } from "@/components/dataForm";
import { getDataMethod } from "@/components/dataForm/util/util";
import Icon from "ant-design-vue/es/icon";
import "ant-design-vue/lib/icon/style/css";
import Tooltip from "ant-design-vue/es/tooltip";
import "ant-design-vue/lib/tooltip/style/css";

export default {
  name: "home",
  components: { DataForm },
  data() {
    return {
      content: []
    };
  },
  created() {
    this.content = [
      {
        label: "输入框input",
        name: "input",
        // extra: "啦啦啦",
        // colon: false,
        // labelWidth: "100px",
        option: {
          rules: [{ required: true, message: "Please select your country!" }]
        },
        props: {
          placeholder: "请输入姓名"
        },
        on: {
          change: e => {
            const { value } = e.target;
            console.log("change", value);
          },
          focus: e => {
            console.log("focus", e);
          },
          blur: e => {
            console.log("blur", e);
          },
          pressEnter: e => {
            console.log("pressEnter", e);
          }
        }
      },
      {
        label: "数字输入框number",
        name: "number",
        type: "number",
        props: {
          min: 3,
          max: 500
        },
        on: {
          change: value => {
            console.log("change", value);
          },
          focus: e => {
            console.log("focus", e);
          },
          blur: e => {
            console.log("blur", e);
          },
          pressEnter: e => {
            console.log("pressEnter", e);
          }
        }
      },
      {
        label: "密码输入框",
        name: "password",
        type: "password",
        props: {
          placeholder: "请输入姓名"
        },
        on: {
          change: e => {
            const { value } = e.target;
            console.log("change", value);
          },
          focus: e => {
            console.log("focus", e);
          },
          blur: e => {
            console.log("blur", e);
          },
          pressEnter: e => {
            console.log("pressEnter", e);
          }
        }
      },
      {
        label: () => {
          return (
            <span>
              <span style="margin-right:10px;">自定义label</span>
              <Tooltip>
                <template slot="title">自定义label内容</template>
                <a>
                  <Icon type="question-circle" />
                </a>
              </Tooltip>
            </span>
          );
        },
        name: "diylabel"
      },
      {
        label: "select基本",
        name: "select",
        type: "select",
        data: [
          {
            id: 1,
            text: "男"
          },
          {
            id: 2,
            text: "女"
          }
        ],
        props: {
          placeholder: "请选择性别"
        },
        on: {
          change: (value, sel) => {
            console.log("change", value, sel);
          },
          focus: e => {
            console.log("focus", e);
          },
          blur: e => {
            console.log("blur", e);
          },
          pressEnter: e => {
            console.log("pressEnter", e);
          }
        }
      },
      {
        label: "select多选",
        name: "select2",
        type: "select",
        data: [
          {
            id: 1,
            text: "男"
          },
          {
            id: 2,
            text: "女"
          }
        ],
        props: {
          mode: "multiple"
        }
      },
      {
        label: "select可输入tag",
        name: "select3",
        type: "select",
        data: [
          {
            id: 1,
            text: "男"
          },
          {
            id: 2,
            text: "女"
          }
        ],
        props: {
          mode: "tags"
        },
        on: {
          pressEnter: () => {
            return false;
          }
        }
      },
      {
        label: "select可搜索",
        name: "select4",
        type: "select",
        data: [
          {
            id: 1,
            text: "男123",
            code: "nan123"
          },
          {
            id: 2,
            text: "女456",
            code: "nv123"
          },
          {
            id: 4,
            text: "保密456",
            code: "baomi456"
          }
        ],
        props: {
          showSearch: true,
          optionFilterProp: "children",
          filterOption: (input, option, data) => {
            return (
              data.text.toLowerCase().indexOf(input.toLowerCase()) >= 0 ||
              data.code.toLowerCase().indexOf(input.toLowerCase()) >= 0
            );
          }
        }
      },
      {
        label: "级联选择",
        name: "cascader",
        type: "cascader",
        valueField: "value", //可选项数据值字段， 默认 id
        textField: "label", //可选项数据文本字段  默认 text
        data: [
          //可选数据
          {
            value: "zhejiang",
            label: "Zhejiang",
            children: [
              {
                value: "hangzhou",
                label: "Hangzhou",
                children: [
                  {
                    value: "xihu",
                    label: "West Lake"
                  }
                ]
              }
            ]
          },
          {
            value: "jiangsu",
            label: "Jiangsu",
            children: [
              {
                value: "nanjing",
                label: "Nanjing",
                children: [
                  {
                    value: "zhonghuamen",
                    label: "Zhong Hua Men"
                  }
                ]
              }
            ]
          }
        ],
        on: {
          change: (value, sel) => {
            console.log("change", value, sel);
          },
          focus: e => {
            console.log("focus", e);
          },
          blur: e => {
            console.log("blur", e);
          },
          pressEnter: e => {
            console.log("pressEnter", e);
          }
        }
      },
      {
        label: "多选框",
        name: "checkbox",
        type: "checkbox",
        trueValue: "ok",
        falseValue: "no",
        on: {
          change: value => {
            console.log("change", value);
          }
        }
      },
      {
        label: "多选框组",
        name: "checkboxGroup",
        type: "checkboxGroup",
        data: [
          { label: "Apple", value: "Apple" },
          { label: "Pear", value: "Pear" },
          { label: "Orange", value: "Orange" }
        ],
        on: {
          change: value => {
            console.log("change", value);
          }
        }
      },
      {
        label: "单选框组",
        name: "radioGroup",
        type: "radioGroup",
        data: [
          { label: "Apple", value: "Apple" },
          { label: "Pear", value: "Pear" },
          { label: "Orange", value: "Orange" }
        ],
        on: {
          change: e => {
            console.log("change", e);
          }
        }
      },
      {
        label: "日期选择器",
        name: "datePicker",
        type: "date",
        on: {
          change: (value, sel) => {
            console.log("change", value, sel);
          },
          focus: e => {
            console.log("focus", e);
          },
          blur: e => {
            console.log("blur", e);
          }
        }
      },
      {
        label: "月份选择器",
        name: "monthPicker",
        type: "month",
        on: {
          change: (value, sel) => {
            console.log("change", value, sel);
          },
          focus: e => {
            console.log("focus", e);
          },
          blur: e => {
            console.log("blur", e);
          }
        }
      },
      {
        label: "星期选择器",
        name: "weekPicker",
        type: "week",
        on: {
          change: (value, dateString, week) => {
            console.log("change", value, dateString, week);
          },
          focus: e => {
            console.log("focus", e);
          },
          blur: e => {
            console.log("blur", e);
          }
        }
      },
      {
        label: "日期范围选择器",
        name: "dateRangePicker",
        type: "dateRange",
        on: {
          change: (value, dateString) => {
            console.log("change", value, dateString);
          },
          focus: e => {
            console.log("focus", e);
          },
          blur: e => {
            console.log("blur", e);
          }
        }
      },
      {
        label: "时间选择器",
        name: "timePicker",
        type: "time",
        props: {
          use12Hours: true
        },
        on: {
          change: (value, dateString) => {
            console.log("change", value, dateString);
          },
          focus: e => {
            console.log("focus", e);
          },
          blur: e => {
            console.log("blur", e);
          }
        }
      },
      {
        label: "时间范围选择器",
        name: "timeRangePicker",
        type: "timeRange",
        on: {
          change: (value, dateString) => {
            console.log("change", value, dateString);
          },
          focus: e => {
            console.log("focus", e);
          },
          blur: e => {
            console.log("blur", e);
          }
        }
      },
      {
        label: "滑动输入条",
        name: "slider",
        type: "slider",
        props: {
          range: true,
          marks: {
            0: "0°C",
            26: "26°C",
            37: "37°C",
            100: {
              style: {
                color: "#f50"
              }
              // label: <strong>100°C</strong>
            }
          }
        }
      },
      {
        label: "开关",
        name: "switch",
        type: "switch",
        trueValue: "ok",
        falseValue: "no"
      },
      {
        label: "树选择器",
        name: "treeSelect",
        type: "treeSelect",
        props: {
          treeDefaultExpandAll: true,
          multiple: true
        },
        data: [
          {
            title: "Node1",
            value: "0-0",
            key: "0-0",
            children: [
              {
                title: "Child Node1",
                value: "0-0-1",
                key: "0-0-1"
              },
              {
                title: "Child Node2",
                value: "0-0-2",
                key: "0-0-2"
              }
            ]
          },
          {
            title: "Node2",
            value: "0-1",
            key: "0-1"
          }
        ]
      },
      {
        label: "评分选择器",
        name: "rate",
        type: "rate"
        // props:{
        //   character:"好"
        // }
      },
      {
        label: "插槽",
        name: "name4",
        slot: "mySlot"
      },
      {
        label: "文本域",
        name: "textarea",
        type: "textarea"
        // colnum: 2
      },
      {
        label: "上传",
        buttonText: "点击选择图片",
        // button: ()=>{
        //   return (
        //     <a>点击我上传图片哦</a>
        //   )
        // },
        name: "upload",
        type: "upload",
        // colnum: 3,
        // option:{
        //   valuePropName: 'fileList',
        //   getValueFromEvent: this.normFile,
        // },
        props: {
          name: "logo",
          multiple: true,
          action: "/api/upload.do",
          // action:()=>{
          //   return new Promise((resolve, reject) => {

          //   })
          // },
          headers: {
            authorization: "authorization-text"
          },
          "list-type": "picture"
        }
      },
      {
        label: "下拉面板",
        name: "dropdownPanel",
        type: "dropdownPanel",
        props: {
          // delete: true, //选择数据是否可删除
          // separateIcon: "/", //文本分隔符号
          trigger: ["click"] //触发事件
        },
        content: {
          title: "自定义标题", //标题
          // slot: ["searchForm", "contentData", "footerAction"],
          // width: "1000px", //面板宽度
          search: {
            //搜索项
            form: [
              {
                label: "日期",
                name: "dateRangePicker",
                type: "dateRange",
                width: "205px",
                props: {
                  placeholder: ["开始日期", "结束日期"]
                }
              },
              {
                label: "选择框",
                name: "select",
                type: "select",
                // width: "200px",
                data: [
                  {
                    id: 1,
                    text: "男"
                  },
                  {
                    id: 2,
                    text: "女"
                  }
                ],
                props: {
                  placeholder: "请选择性别"
                }
              },
              {
                label: "输入框",
                name: "input",
                props: {
                  placeholder: "请输入姓名"
                }
              },
              {
                label: "复选",
                name: "checkbox",
                type: "checkbox"
              },
              {
                label: "开关",
                name: "switch",
                type: "switch"
              }
            ],
            onSearchBefore: values => {
              console.log("搜索前……");
              return values;
            }
          },
          grid: {
            api: getDataMethod,
            params: {
              Status: 1
            },
            rowSelect: false, //是否可多选，可选参数："checkbox"：多选，"radio"：单选,false:不展示可选控件
            rowKey: "Id", //指定表格数据主键
            // valueKey: "age", //提交数据字段名,默认为Text，或者指定的textField的值
            // labelKey:"Text",//选中需要显示的字段名
            // selectedIds: [1, 2, 4], //默认选中项Id
            // data: [
            //   //数据
            //   {
            //     Id: "1",
            //     Text: "John Brown1",
            //     age: 32,
            //     address: "New York No. 1 Lake Park"
            //   },
            //   {
            //     Id: "2",
            //     Text: "Jim Green2",
            //     age: 42,
            //     address: "London No. 1 Lake Park"
            //   },
            //   {
            //     Id: "3",
            //     Text: "Joe Black3",
            //     age: 32,
            //     address: "Sidney No. 1 Lake Park"
            //   },
            //   {
            //     Id: "4",
            //     Text: "Disabled User4",
            //     age: 99,
            //     address: "Sidney No. 1 Lake Park"
            //   },
            //   {
            //     Id: "5",
            //     Text: "John Brown",
            //     age: 32,
            //     address: "New York No. 1 Lake Park"
            //   }
            // ],
            columns: [
              //表头参数
              {
                title: "Name",
                dataIndex: "Text",
                scopedSlots: { customRender: "name" } //自定义列数据
              },
              {
                title: "Age",
                dataIndex: "age"
              },
              {
                title: "Address",
                dataIndex: "address"
              }
            ],
            props: {
              //表格属性
              size: "small"
              // bordered: true
            },
            pagination: {
              pageSize: 5
            }
          }
        },
        on: {
          open: () => {
            //打开面板
            console.log("open");
          },
          clear: () => {
            //清除
            console.log("clear");
          },
          cancel: originValue => {
            //取消
            console.log("cancel", originValue);
          },
          change: () => {
            //改变数据
            console.log("change");
          },
          onSubmit: value => {
            //确定
            console.log("onSubmit", value);
          },
          close: value => {
            //关闭
            console.log("close", value);
          },
          rowclick: e => {
            //选中行事件
            console.log(e, "rowclick");
          },
          beforeselect: rows => {
            //选中前行数据
            console.log(rows, "beforeselect");
          },
          select: row => {
            //record当前选中行数据
            console.log(row, "row");
          },
          afterselect: (selectedIds, selectedRows) => {
            //所有选中行
            console.log(selectedRows, "selectedRows");
            //所有选中行的Id
            console.log(selectedIds, "selectedIds");
          }
        }
      }
    ];
  },
  methods: {
    abb(values) {
      console.log(values);
    }
  }
  // render(h) {
  //   return h("data-form", {
  //     props: {
  //       content: this.content
  //     },
  //     on: {
  //       submit: () => {
  //         // debugger;
  //       }
  //     }
  //   });
  // }
};
</script>
